<template>
    <view class="main">
        <van-dropdown-menu active-color="#1989fa">
            <van-dropdown-item :value="value1" :options="option1" />
        </van-dropdown-menu>
        <view class="f fac fpa" style="height: 150rpx">
            <view>数据A</view>
            <view>数据B</view>
        </view>
        <view class="f fpc margin-top-xs">
            <view class="f btn2">
                <view :class="'btn_l f fpc ' + (isSel == 2 ? 'selColor' : '')" @tap="selectTap" data-sel="2">近七日</view>
                <view :class="'btn_r f fpc ' + (isSel == 3 ? 'selColor' : '')" @tap="selectTap" data-sel="3">近三十日</view>
            </view>
        </view>
        <view class="mychart-bar">
            <ec-canvas class="mychart-bar" type="2d" id="mychart-dom-bar" :ec="ec"></ec-canvas>
        </view>
        <view class="mychart-bar margin-top-lg">
            <ec-canvas class="mychart-line" type="2d" id="mychart-dom-line" :ec="ec"></ec-canvas>
        </view>
    </view>
</template>

<script>
// import ecCanvas from '../../../ec-canvas/ec-canvas';
// import * as echarts from '../../../ec-canvas/echarts';
// const util = require('../../../util/util');
export default {
    // components: {
    //     ecCanvas
    // },
    data() {
        return {
            isSel: 2,
            barData: {
                xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                yData: [23, 50, 18, 25, 80, 25, 100]
            },
            ec: {
                lazyLoad: true // 懒加载
            },
            option1: [
                {
                    text: '全部统计',
                    value: 0
                },
                {
                    text: '统计A',
                    value: 1
                },
                {
                    text: '统计B',
                    value: 2
                }
            ],
            value1: 0,
            value2: 'a'
        };
    },
    onLoad() {
        let recentWeek = [];
        for (let index = -6; index <= 0; index++) {
            recentWeek.push(util.recentDate(index));
        }

        // let now = new Date();
        let current_month_num = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
        let current_month = [];
        for (let i = 1; i <= current_month_num; i++) {
            let day = new Date().setDate(i);
            current_month.push(util.formatDate(day, 'M-D'));
        }
        this.setData({
            ['barData.xData']: recentWeek
        });
    },
    onShow() {
        let that = this;
        setTimeout(function () {
            // 获取 chart 实例的方式
            // console.log(chart)
            that.initChart(that.barData);
            that.initLineChart(that.barData);
        }, 300);
    },
    methods: {
        selectTap(e) {
            const isSel = e.currentTarget.dataset.sel;
            const that = this;
            const barData = that.barData;
            // console.log(barData);
            if (isSel == 1) {
                barData.xData = ['10:20', '10:30', '10:50'];
                barData.yData = [90, 60, 80];
            } else if (isSel == 2) {
                barData.xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                barData.yData = [23, 50, 18, 25, 80, 25, 100];
            } else {
                barData.xData = ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07'];
                barData.yData = [90, 60, 80, 70, 40, 50, 100];
            }
            that.setData({
                isSel,
                barData
            });
            that.initChart(that.barData);
        },

        initChart(barData) {
            // 绑定组件
            this.barComponent = this.zpSelectComponent('.mychart-bar');
            // 初始化柱状图
            this.barComponent.init((canvas, width, height, dpr) => {
                // 初始化图表
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 解决模糊显示问题
                });
                // 开发中根据从后端获取barData数据,动态更新图表
                chart.setOption(util.barOption(barData));
                return chart;
            });
        },

        initLineChart(barData) {
            // 绑定组件
            this.lineComponent = this.zpSelectComponent('.mychart-line');
            // 初始化柱状图
            this.lineComponent.init((canvas, width, height, dpr) => {
                // 初始化图表
                const chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 解决模糊显示问题
                });
                // 开发中根据从后端获取barData数据,动态更新图表
                chart.setOption(util.lineOption(barData));
                return chart;
            });
        }
    }
};
</script>
<style>
/* @import './index.css'; */
</style>
